<template>
	<div class="select-tree" v-clickoutside="outsideClose">
		<el-input 
			ref="selectTreeInput" 
			:value="selectText" 
			placeholder="请输入内容" 
			readonly
			@focus="selectTreeFocus"
			@blur="selectTreeBlur"
		></el-input>



		<div v-show="dropDownVisible" ref="selectTreeDropDown" class="select-tree-drop-down">
			<el-input
				class="drop-down-input"
		  		placeholder="输入关键字进行过滤"
		  		v-model="filterText">
			</el-input>

			<div class="tree-wrap" style="height: 200px;">
				<el-scrollbar style="height: 100%;">
					<el-tree
						v-if="data.length>0"
					  	class="filter-tree"
					  	:data.sync="data"
					  	:props="defaultProps"
					  	default-expand-all
					  	:expand-on-click-node="false"
					  	:filter-node-method="filterNode"
					  	@node-click="treeNodeClick"
					  	ref="tree">
					</el-tree>
				</el-scrollbar>	
			</div>	
		</div>
		

	</div>
</template>

<script>
export default{
	props:{
		value:{
			type:String,
			default:''
		},
		data:{
			type:Array,
			default:()=>{
				return []
			}
		}
	},
	data(){
		return{
			selectId:'',
			selectText:'',
			dropDownVisible:false,
			input:'',
			filterText: '',
			defaultProps: {
	          children: 'childrenNodes',
	          label: 'name'
	        }
		}
	},
	watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      value(newVal,oldVal){
      	console.log(this.data)
      	function getPcode(arr,target){
      		for(var i=0;i<arr.length;i++){
      			if(arr[i].code == target){
      				return arr[i].name;
      			}else if(arr[i].childrenNodes.length>0){
      				return getPcode(arr[i].childrenNodes,target)
      			}
      		}
      	}

      	this.selectText = getPcode(this.data,newVal);

      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      selectTreeFocus(){
      	this.dropDownVisible = true
      },
      selectTreeBlur(){
      	//this.dropDownVisible = false
      },
      treeNodeClick(data,node,$node){
      	console.log(data)
      	console.log(node)
      	console.log($node)
      },
      outsideClose(){
      	this.dropDownVisible = false
      }
    },
    directives:{
    	clickoutside:{
    		bind(el,binding,vnode){
    			function documentHandler(e){
    				if(el.contains(e.target)){
    					return false
    				}
    				if(binding.expression){
    					binding.value(e)
    				}
    			}

    			function keyUp(e){
    				if(e.keyCode == 27){
    					if(binding.expression){
    						binding.value(e)
    					}
    				}
    			}

    			el.__vueClickOutSize__ = documentHandler
    			el.__vueKeyup__ = keyUp

    			document.addEventListener('keyup', keyUp)
          		document.addEventListener('click', documentHandler)
    		},
    		unbind(el, binding) {
          		document.removeEventListener('click', el.__vueClickOutSize__)
          		delete  el.__vueClickOutSize__

          		document.removeEventListener('keyup', el.__vueKeyup__)
          		delete  el.__vueKeyup__
        	}
    	}
    }
}
</script>


<style>
.el-scrollbar__wrap{
  overflow-x: hidden;
}	

</style>


<style scoped>
.select-tree{
	position: relative;

}	

.select-tree-drop-down{
	padding: 4px;
	position: absolute;
	z-index: 999;
	left: 0;
	margin-top: 5px;
	background-color: #FFFFFF;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.drop-down-input{
	margin-bottom: 5px;
}
</style>